<template>
    <div class="menu">
        <!--左侧列表整体结构-->
      <aside>
        <ul class="asideMenu">
          <li v-for="(item,id) in menuList" :key='id'>
            <div class="oneMenu" @click="showToggle(item,id)">
              <span class="onespan">{{item.call}}</span>
              <span class="onespan">{{item.name}}</span>
            </div>
            <ul v-show="item.isSubShow">
              <li v-for="(subItem,index) in item.subItems" :key='index'>
                <div class="oneMenuChild" @click="btn(item.status)">{{subItem.name}}</div>
              </li>
            </ul>
          </li>
        </ul>
      </aside>
    </div>
</template>

<script>
export default {
  name: 'IndexList',
  data: function () {
    return {
      menuList: [
        {
          name: '网上订餐 天天优惠',
          isSubShow: false
        },
        {
          name: '(05:45-09:14)',
          call: '早餐',
          isSubShow: false,
          status: '1',
          subItems: [
            {
              name: '早餐一元'
            },
            {
              name: '大饼卷万物'
            },
            {
              name: '握的大饭团'
            },
            {
              name: '帕尼尼'
            },
            {
              name: '现熬好州'
            },
            {
              name: '小食配餐'
            },
            {
              name: '缤纷饮料'
            }
          ]
        },
        {
          name: '(09:15-22:44)',
          call: '正餐',
          isSubShow: false,
          status: '2',
          subItems: [
            {
              name: '当季主打'
            },
            {
              name: '桶'
            },
            {
              name: '美味汉堡'
            },
            {
              name: '人气明星餐'
            },
            {
              name: '炸鸡啤酒'
            },
            {
              name: '鸡翅/鸡排'
            },
            {
              name: '甜品/冰淇淋'
            },
            {
              name: '缤纷饮料'
            }
          ]
        },
        {
          name: '(22:45-次日5:44)',
          call: '晚餐',
          isSubShow: false,
          status: '3',
          subItems: [
            {
              name: '夜宵半价'
            },
            {
              name: '炸鸡啤酒'
            },
            {
              name: '现熬好粥'
            },
            {
              name: '美味汉堡/卷'
            },
            {
              name: '小食配餐'
            },
            {
              name: '缤纷饮料'
            },
            {
              name: '多人套餐'
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 点击展开折叠菜单
    showToggle: function (item, id) {
      this.menuList.forEach(i => {
        // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false
        if (i.isSubShow !== this.menuList[id].isSubShow) {
          i.isSubShow = false
        }
      })
      item.isSubShow = !item.isSubShow
    },
    btn (index) {
      this.$store.state.status = index
    }
  }
}
</script>

<style lang="stylus" scoped>
    .menu
      width: 13%
      height 10.5rem
      border: 1px solid #9fa4a4
      margin-left: 5.35rem
      margin-top: .15rem
      .asideMenu
        width: 100%
        height: 100%
      .oneMenu
        display: flex
        width: 100%
        height: .8rem
        line-height: .8rem
        font-size: 18px
        font-weight: normal
        border-bottom: 1px solid #9fa4a4
      .oneMenuChild
        display: flex
        width: 100%
        padding: 0 .2 0 .2
        height: .8rem
        line-height: .8rem
        border-bottom: 1px solid #9fa4a4
        color: #454343
        font-size: 14px
</style>
